<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="dialogStatus === 'create' ? '新建模板' : '更新模板'"
    size="61%"
    :visible.sync="visibility"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="dataForm"
        :model="temp"
        :rules="rules"
        label-position="right"
        label-width="120px"
        style="width: 100%"
      >
        <el-form-item label="模板名称" prop="recordTemplateName">
          <el-input v-model.trim="temp.recordTemplateName" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="temp.memo" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleCommit">
            确 定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import {
  saveManufactureRecordTemplate,
  updateManufactureRecordTemplate
} from '@/api/rs/recordTemplate'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    dialogStatus: {
      required: true,
      type: String
    },
    scope: {
      required: true,
      type: String
    },
    currentTemplate: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      temp: {
        type: 1
      },
      rules: {
        recordTemplateName: [
          { required: true, message: '模板名称不可为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        if (this.currentTemplate) {
          this.temp = Object.assign({}, this.currentTemplate)
        } else {
          this.temp = {
            type: 1
          }
        }
      }
    }
  },
  methods: {
    handleCommit() {
      this.loading = true
      if (this.dialogStatus === 'create') {
        this.temp.scope = this.scope
        saveManufactureRecordTemplate(this.temp)
          .then((response) => {
            this.visibility = false
            this.$emit('save', this.temp)
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        updateManufactureRecordTemplate(this.temp)
          .then((response) => {
            this.visibility = false
            this.$emit('save', this.temp)
          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
}
</script>

<style lang="scss">
</style>>
